<template>
	<div class="m-header">
		<!-- <div class="m-logo_wrapper ibox" @click="onCollapsed">
			<img src="./menu-right.svg" v-if="isCollapsed" /><img src="./menu-left.svg" v-else />
		</div> -->

		<div class="right-menu" ref="rightMenu">
			<!-- <div class="logo"></div> -->
			<div class=""></div>
			<div class="users">
				<el-dropdown
					class="avatar-container right-menu-item hover-effect"
					trigger="click"
				>
					<div class="avatar-wrappers">
						<div class="user"><img src="./u.png" /></div>
						<div class="uname">{{ uname }}</div>
						<i class="el-icon-caret-bottom" />
					</div>
					<el-dropdown-menu slot="dropdown">
						<!-- <router-link to="/profile/index">
                        <el-dropdown-item>个人中心</el-dropdown-item>
                    </router-link>
                    <a target="_blank" href="#">
                        <el-dropdown-item>Github</el-dropdown-item>
                    </a> -->
						<el-dropdown-item divided>
							<span style="display:block;" @click="logout">退出登陆</span>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>

<script>
import "./header.styl";
export default {
	name: "mheader",
	data() {
		return {
			uname: "",
		};
	},
	props: {
		collapsed: Boolean,
	},
	computed: {
		isCollapsed() {
			return this.collapsed;
		},
	},
	mounted() {
		this.uname = localStorage.getItem("uname") || "";
	},
	methods: {
		logout() {
			this.$store.dispatch("doLogout");
			this.$router.push(`/login?redirect=${this.$route.fullPath}`);
		},
		onCollapsed() {
			this.$emit("collapsed");
		},
	},
};
</script>
<style lang="scss" scoped>
.m-header {
	display: flex;
	justify-content: space-around;
}
.user {
	width: 25px;
	height: 32px;
	margin-top: 8px;
	margin-right: 10px;
}
.avatar-wrappers {
	width: auto;
	height: 100%;
	line-height: 50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	position: relative;
}
.uname {
	width: auto;
	margin: 0 20px;
	font-size: 18px;
}
.el-icon-caret-bottom {
	margin-top: 16px;
}
.right-menu {
	justify-content: space-between;
}
.logo {
	background: url("./c.png");
	width: 110px;
    height: 21px;
    background-size: cover;
    margin: 15px 0 0 70px;
}
</style>
